<template>
  <div
    v-if="total"
    class="pagination_container"
    :style="{ 'justify-content': paginationAlign }"
  >
    <el-pagination
      :background="background"
      :currentPage="currentPage"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
interface props {
  /**
   * 当前页码，默认当前第1页
   */
  currentPage?: number;
  /**
   * 分页每页条数，默认每页10条数据
   */
  pageSize?: number;
  /**
   *每页显示个数选择器的下拉框类名
   */
  pageSizes?: number[];
  /**
   *组件布局，子组件名用逗号分隔
   *sizes 条数集合
   *prev 上一页
   *pager 分页器
   *next 下一页
   *jumper 跳转到哪一页
   *->
   *total 总条数
   *slot 插槽
   */
  layout?: string;
  /**
   * 总条数
   */
  total?: number;
  /**
   * 分页器背景色 默认false 每页背景色
   */
  background?: boolean;
  /**
   * 分页组件的位置 默认值：'left'
   */
  paginationAlign?: "left" | "center" | "right";
}
withDefaults(defineProps<props>(), {
  currentPage: 1,
  pageSize: 10,
  pageSizes: () => [10, 20, 30],
  layout: "total, prev, pager, next",
  total: 0,
  background: false,
  paginationAlign: "left",
});
// 事件分发
const emit = defineEmits(["pageSizeChange", "pageChange"]);
/**
 * 每页条数发生变化时触发
 * @param pageSize 每页条数
 */
const handleSizeChange = (pageSize: number) => {
  console.log(`当前每页${pageSize}条数据`);
  emit("pageSizeChange", pageSize);
};
/**
 * 当前页码发生变化时触发
 * @param currentPage 当前多少页
 */
const handleCurrentChange = (currentPage: number) => {
  console.log(`当前: ${currentPage}页`);
  emit("pageChange", currentPage);
};
</script>

<style lang="scss" scoped>
.pagination_container {
  display: flex;
  padding: 5px;
}
</style>
